<!doctype html>
<html>
<head>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>轮转图片</title>
    <link rel="stylesheet" href="/static/home/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div style='margin-top: 20px'>
    <div class='container' style="margin-bottom: 50px;margin-top: 20px">
        <div class='col-md-8'>
            <form class="am-form" id='form' action='/config/roll/addroll'>
                <legend>图片信息</legend>

                <div>
                    <label for="title">标题</label>
                    <input class="form-control" type="text" id="title" name="title" placeholder="输入图片标题"
                           maxlength="100">

                    <div id='titleTip'></div>
                </div>

                <div>
                    <label for="content">描述</label>
                    <textarea class="form-control" id="content" name="content" rows="7" placeholder="图片描述"
                              maxlength="200"></textarea>

                    <div id='contentTip'></div>
                </div>

                <div>
                    <label for="url">跳转Url</label>
                    <input type="url" id="url" name="url" placeholder="跳转Url" class="form-control">
                    <!-- <div id='urlTip'></div> -->
                </div>
                <div>
                    <label for="sort">排序</label>
                    <input class="form-control" type="number" name="sort" value='0' min="0"/>
                </div>
                <div id='uploadlogo'></div>
                <div class="form-group">
                    <div>
                        <button type="submit" class="btn btn-default">增加轮转</button>
                    </div>
                </div>

            </form>
        </div>
        <div class='col-md-3 col-md-offset-1'>
            <div align="center">
                <img src="/static/ico/logo.jpg" id='logoimg' class="am-img-responsive" alt="图片"
                     style="border:1px red solid;height: 260px; width: 260px;"/>

                <p>请上传格式为.png .jpg .jpeg的图片。</p>

                <p>上传完毕后需要点击左边曾加按钮才能生效。</p>

                <div id='uploadphotoconfirm' style='color:red'></div>
                <div>
                    <button type="submit" class="btn btn-default" id='upload_button'>上传图片</button>
                </div>
                <div class="btn btn-success"><a id='lookphoto' href="/static/ico/logo.jpg" target="_blank">查看图片</a>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- content start -->
<div class='container'>
    <div class="row">
        <div class='col-md-10'>
            <div><strong>轮转图（最多六张）</strong>
                <small>Gallery</small>
            </div>
        </div>
    </div>
    <div class="row">
    {{range $i,$e:=.roll}}
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <a href="{{$e.Photo}}" target="_blank">
                    <img src="{{$e.Photo}}">
                </a>

                <div class="caption">
                    <h3><a href="{{$e.Url}}" target="_blank">标题:{{$e.Title}}</a></h3>

                    <p>创建时间：{{$e.Createtime}}</p>
                    <p>更新建时间：{{$e.Updatetime}}</p>
                    <p>排序：{{$e.Sort}}|浏览量：{{$e.View}}</p>
                    <p>描述：{{$e.Content}}</p>

                    <div>
                        <button onclick="updatephoto({{$e.Id}})">
                            修改图片
                        </button>
                        <button onclick="deletephoto({{$e.Id}})">
                            删除图片
                        </button>
                    {{if eq $e.Status 0}}
                        <button style="color:red" onclick="openphoto({{$e.Id}})">
                            开启图片
                        </button>
                    {{else}}
                        <button onclick="closephoto({{$e.Id}})">
                            关闭图片
                        </button>
                    {{end}}
                    </div>
                </div>
            </div>
        </div>
    {{end}}
    </div>
</div>

<script type="text/javascript" src="/static//admin/formvalidator4.1.3/jquery-1.7.2.min.js"></script>
<script src="/static/admin/formvalidator4.1.3/formValidator-4.1.3.min.js" type="text/javascript"
        charset="UTF-8"></script>
<script src="/static/admin/formvalidator4.1.3/formValidatorRegex.js" type="text/javascript" charset="UTF-8"></script>
<script src="/static/tool/ajaxupload.js"></script>
<script>
    function updatephoto(id) {
        window.open('/config/roll/updateroll?id=' + id);
    }

    function deletephoto(id) {
        if (confirm('删除这张图片？')) {
            $.post('/config/roll/deleteroll', {id: id}, function (data) {
                alert(data.info);
                if (data.status) {
                    window.location.href = "/config/roll/index";
                }
            });
        }
        return;
    }

    function openphoto(id) {
        if (confirm('开启这张图片？')) {
            $.post('/config/roll/updateroll', {id: id, small: 'open'}, function (data) {
                alert(data.info);
                if (data.status) {
                    window.location.href = "/config/roll/index";
                }
            });
        }
        return;
    }

    function closephoto(id) {
        if (confirm('关闭这张图片？')) {
            $.post('/config/roll/updateroll', {id: id, small: 'close'}, function (data) {
                alert(data.info);
                if (data.status) {
                    window.location.href = "/config/roll/index";
                }
            });
        }
        return;
    }
</script>
<script type="text/javascript">
    $(function () {
        $.formValidator.initConfig({
            formID: "form", submitOnce: true,
            onSuccess: function () {
                var registerForm = $("#form");
                $.post(registerForm.attr("action"), registerForm.serialize(), function (data) {
                    alert(data.info);
                    if (data.status) {
                        $("#uploadlogo").html('');
                        window.location.href = "/config/roll/index";
                    }
                    return false;
                });
            }
        });


        $("#title").formValidator({onShowText: "请输入图片标题"})
                .inputValidator({
                    min: 2,
                    max: 100,
                    onError: "标题2~100个字符",
                    empty: {leftEmpty: false, rightEmpty: false, emptyError: "标题两边不能为空"}
                });

        $("#content").formValidator({onShowText: "请输入图片描述"})
                .inputValidator({min: 0, max: 200, onError: "最多200个字符"});

        /* 	$("#url").formValidator({onFocus:"Url",onCorrect:"谢谢你的合作"})
            .regexValidator({regExp:["url"],dataType:"enum",onError:"你输入的url不正确"}); */


    });

</script>
<script>
    $(function () {
        var button = $('#upload_button'), interval;
        var confirmdiv = $('#uploadphotoconfirm');
        var fileType = "ptic", fileNum = "one";
        new AjaxUpload(button, {
            action: "/public/file/upload?dir=image",
            name: 'imgFile',
            responseType: 'json',
            onSubmit: function (file, ext) {
                if (fileType == "pic") {
                    if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)) {
                        this.setData({
                            'info': '文件类型为图片'
                        });
                    } else {
                        confirmdiv.text('文件格式错误，请上传格式为.png .jpg .jpeg 的图片');
                        return false;
                    }
                }

                confirmdiv.text('文件上传中');

                if (fileNum == 'one')
                    this.disable();

                interval = window.setInterval(function () {
                    var text = confirmdiv.text();
                    if (text.length <= 5) {
                        confirmdiv.text('文件上传中...');
                    } else {
                        confirmdiv.text('文件上传中');
                    }
                }, 200);
            },
            onComplete: function (file, response) {
                if (response.error == 1) {
                    confirmdiv.text(response.message);
                } else {
                    confirmdiv.text("上传完成");
                    $("#logoimg").attr("src", response.url);
                    $('#lookphoto').attr("href", response.url);
                    $("#uploadlogo").html("<input hidden='hidden' type='hidden'  name='photo' value='" + response.url + "'>");
                }

                window.clearInterval(interval);
                this.enable();
            }
        });
    });

</script>
</body>
</html>